<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>支付宝绑定</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
        body{background:#FFF;}
        .noticeText{
          font-weight:300;
          color:#d1d1d1;
          text-align:center;
          margin-top:0.6rem;
          margin-bottom:0.6rem;
          font-size:0.27rem;
        }
        .alipay{
          background:#F4FAFF;
          height:1rem;
          line-height:1rem;
          border-radius:0.07rem;
          padding:0px 0.4rem;
          font-size:0.29rem;
          color:#525252;
          width:90%;
          margin:0px auto;
          margin-top:0.25rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .alipay img{
          width:0.5rem;
          vertical-align: middle;
          margin-top:-0.1rem;
          margin-right:0.4rem;
          height:0.5rem;
          border-radius:50%;
        }
        .noticeText2{
          font-weight:300;
          color:#A3AAAF;
          text-align:center;
          font-size:0.27rem;
          margin: 0.3rem 3%;
        }
        .user-content{
            margin-top:0.6rem;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <template v-if="info !== null">
            <div id="container">
                <template v-if="!bind">
                    <div class="alipay">
                        <img src="../../../image/my/alipay.png" />{{info.alipay_name}} - {{info.alipay_id}}
                    </div>
                    <p class="noticeText2">
                        支付宝每月允许修改{{info.alipay_change.able_change_alipay_count}}次
                        <span v-if="info.alipay_change.is_able_changed_alipay == 1">，现在<font color="#79CBFF" @click="changeAlipay">更改</font></span>
                    </p>
                </template>
                <div class="user-content" v-else>
                    <div class="user-input">
                        <input v-model.trim="alipay_id" type="text" placeholder="请输入支付宝账号" />
                    </div>
                    <div class="user-input">
                        <input v-model.trim="alipay_name" type="text" placeholder="支付宝绑定的真实姓名" />
                    </div>
                    <div class="user-input">
                        <input type="tel" v-model.trim="vcode" placeholder="4位的数字" maxlength="4" />
                        <span v-if="isSending" class="codeBtn">{{countDownTime}}s后可重发</span>
                        <span v-else class="codeBtn" @click="sendMsg">发送验证</span>
                    </div>
                    <button @click="bindSubmit" class="user-btn">绑定</button>
                    <p class="noticeText">短信将发送至{{userMobile}}</p>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="loadFull whiteBg">
                <div class="se-loading"></div>
            </div>
        </template>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    bind: true,
                    info: null,
                    alipay_id: '',
                    alipay_name: '',
                    vcode: '',
                    isSending: false,
                    countDownTime: 60,
                    timer: 0,
                    updateEventBus: {
                        settings: 'updateSettingsPage',
                        wallet: 'updateWidthDrawPage',
                    },
                },
                created(){
                    this.referer = api.pageParam.data && api.pageParam.data.referer;
                },
                computed: {
                    userMobile: function(){
                        var tel = this.info.user_mobile;
                        return tel.substr(0,3)+'*****'+tel.substr(tel.length-3);
                    },
                },
                methods:{
                    getAlipayInfo: function(){
                        var _this = this;
                        $.ajax({
                            url: '/cash/drawn/',
                            method: 'get',
                            success: function(res){
                                _this.bind = res.data.alipay_name === null;
                                _this.info = res.data;
                            },
                            error: function(err){
                                $.toast(err.message);
                            }
                        });
                    },
                    changeAlipay: function(){
                        this.bind = true;
                    },
                    sendMsg: function(){
                        var _this = this;
                        var mobile = this.info.mobile;
                        if(this.alipay_id == '' || this.alipay_name == ''){
                            $.toast('支付宝账号、真实姓名不能为空');
                            return false;
                        }
                        
                        
                        $.ajax({
                            url: '/sms/send_bind_alipay_verify_code',
                            method: 'post',
                            data: {mobile: mobile},
							load:true,
                            success: function(res){
								_this.countDown();
								_this.isSending = true;
							},
                            error: function(err){
                                $.toast(err.message);
                            }
                        });
                    },
                    countDown: function(){
                        var _this = this;
                        this.timer = clearTimeout(this.timer);
                        this.timer = setTimeout(()=>{
                            let msgCountdown = _this.countDownTime;
                            msgCountdown--;
                            if(msgCountdown <= 0){
                                _this.countDownTime = 60;
                                _this.isSending = false;
                                _this.timer = clearTimeout(_this.timer);
                            }else{
                                _this.countDownTime = msgCountdown;
                                _this.countDown();
                            }
                        }, 1000);
                    },
                    validate: function(){
                        var msg = [];
                        var status = true;
                        if(this.alipay_id == ''){
                            msg.push('支付宝账号');
                            status = false;
                        }
                        if(this.alipay_name == ''){
                            msg.push('真实姓名');
                            status = false;
                        }
                        if(this.vcode == ''){
                            msg.push('验证码');
                            status = false;
                        }
                        if(!status){
                            $.toast(msg.join('、')+'不能为空');
                        }
                        return status;
                    },
                    bindSubmit: function(){
                        var _this = this;
                        var status = this.validate();
                        if(status){
                            $.ajax({
                                url: '/user/info/change',
                                method: 'post',
								load:true,
                                data: {
                                    alipay_id: _this.alipay_id,
                                    alipay_name: _this.alipay_name,
                                    vcode: _this.vcode
                                },
                                success: function(res){
                                    // updateWalletPage
                                    var eventName = _this.updateEventBus[_this.referer];
                                    api.sendEvent({
                                        name: eventName,
                                    });
                                    api.closeWin();
                                },
                                error: function(err){
                                    $.toast(err.message);
                                }
                            });
                        }
                    },
                },
                mounted(){
					$.initJs(this);
                    this.getAlipayInfo();
                }
            });
        }
    </script>
</body>
</html>
